<style scoped>
  .fa-bars{
    padding-top:1px;
    color: #fff;
  }
</style>
<template>
  <div class="drag" :class="{'pa':status}" style="width: 100%;border: 1px dashed #efefef;left: 20px;" :style="{'top':y-45 + 'px','width':width,'height':height}">
    <div style="position: relative;">
      <span class="handle-box cover-box fa fa-bars" @mouseup.self="leaveNode" @mousedown.self="getNode" v-show="false"></span>
      <slot @click="move"></slot>
    </div>
  </div>
</template>
<script>

  export default {
    data () {
      return {
        status:false,
        height:'auto',
        width:'auto',
        overStatus:false
      }
    },
    props: ['x','y'],

    methods: {
      over () {
        if(!this.overStatus){
          this.$emit('over')
        }
      },
      getNode () {
        this.height = $('.drag').height()+2 + "px"
        this.width = $('.drag').width()+2 + "px"
        this.status = true
        this.overStatus = true
        this.$emit('getid')
      },
      leaveNode () {
        this.overStatus = false
        this.height = 'auto'
        this.width = 'auto'
        this.status = false
        this.$emit('lose')
      },
    }
  }
</script>

<style scoped>
  .pa{
    position: absolute;
  }
</style>
